import './CommentItem.scss'

import React from 'react'

import { connect } from 'react-redux'
import StarScore from 'component/StarScore/startScore'
/**
 * 评论列表
 * @description <CommentList />
 */
class CommentItem extends React.Component {
  renderList() {
    let list = this.props.commentList
    return list.map((item, index) => {
      return <CommentItem key={index} data={item} />
    })
  }
  formatTime(time) {
    let date = new Date(Number(time + '000'))

    return (
      date.getFullYear() + '.' + (date.getMonth() + 1) + '.' + date.getDate()
    )
  }
  renderPic(item) {
    let imgs = item.comment_pics || []

    if (imgs.length) {
      return (
        <div className="img-content">
           {
             imgs.map(((ele, index) => {
               let src = ele.url
               let style = {
                 backgroundImage: `url(${src})`
               }
               return (
                 <div key={index} className={'img-item'} style={style}></div>
               )
             }))

           }
        </div>
      )
    }
  }
  render() {
    let item = this.props.data
    return (
      <div className="comment-item">
        <img
          className="item-pic"
          src={
            item.user_pic_url ||
            'http://xs01.meituan.net/waimai_i/img/default-avatar.c4e0230d.png'
          }
        />
        <div className="item-content">
          <div className="item-name">
            <div className="name">{item.user_name}</div>
            <div className="date">{this.formatTime(item.comment_time)}</div>
          </div>
          <div className="score-time">
            <div className="score">
              <StarScore score={3} />
            </div>
            <div className="time">{item.ship_time + '分钟送达'}</div>
          </div>
          <div className="item-comment">{item.comment}</div>
          <div className="pic-list">{this.renderPic(item)}</div>
        </div>
      </div>
    )
  }
}

export default connect()(CommentItem)
